import React from "react";
import {Animated, ART, Dimensions} from "react-native";

const {Surface, Shape, Path, ClippingRectangle, Pattern, LinearGradient, RadialGradient, Group, Text} = ART;

const {width, height} = Dimensions.get('window')

class Line extends React.Component {

  // .5 颜色占比表示 50%，  那个颜色的占比大，在前；颜色比小，在后。不能大于1
  // 同样的占比，后面的会把前面的替换掉
  // 必须是 Int 类型， 不可以是float或其他

  // x1,y1,x2,y2   x1,y1颜色的起点；x2,y2颜色的终点
  // "0", "0", "300", "0"    300为组件的宽度、弧度的长度   此：表示 横向颜色渐变
  // "0", "0", "0", "40"     40为组件的高度、弧度的高度   此：表示 纵向颜色渐变
  // "0", "0", "300", "100"  300、100 渐变是横向 ///(渐变样式犹如斜杠) 渐变
  linearGradient = new LinearGradient({
      '.4': '#fff',
      '.6': '#ccc',
    },
    "0", "0", "375", "375"
  );
  // "0", "0", "200", "50"

  lineHeight = 80;
  lineWith = 20;

  strokeCanvas = () => {
    const upHeight = this.props.upHeight;
    console.log('upHeight',upHeight)

    const path = Path();
    // path.moveTo(10,width)
    //   .lineTo(10,width-100);
    path.push(`M 10 ${width - upHeight} L 10 ${width - this.lineHeight - upHeight} L ${10 + this.lineWith} ${width - this.lineHeight - upHeight}  L ${10 + this.lineWith} ${width - upHeight} Z`)
    return path
  }

  render() {
    return (
      <Group opacity={1 - this.props.upHeight / 100}>
        <Shape d={this.strokeCanvas()} stroke="#fff" strokeWidth={0} fill={this.linearGradient}/>
      </Group>
    )
  }
}



export const AnimatedLine = Animated.createAnimatedComponent(Line);
